.sidebar-section {
    isolation: isolate; // Prevent the z-index below from leaking out of this container

    &__collapse-button {
        display: flex;
        align-items: center;
        text-align: left;
        width: calc(100% + 0.5rem); // Take full width + account for negative margin
        border: none;
        padding: 0.25rem;
        margin: 0 -0.25rem;

        // Force the button's box-shadow to always show over the sibling element's border
        position: relative;
        z-index: 1;
    }

    &__list {
        list-style-type: none;
        max-height: 12rem;
        overflow: auto;
        // Negative margin and positive padding allows focus rings to not be cut off by overflow:auto
        margin: 0 -0.125rem;
        padding: 0.125rem;
    }

    &__search-box {
        display: block;
        margin: 0.25rem 0;
    }

    &__list-item {
        display: flex;
        font-size: 0.75rem;
        padding: 0.25rem 0.375rem;
        border-radius: 3px;
        width: 100%;
        text-align: left;
        overflow-wrap: anywhere;

        &:hover {
            background-color: var(--color-bg-2);
            text-decoration: none;
        }

        &:focus {
            text-decoration: none;
        }

        &:active {
            background-color: var(--color-bg-3);
        }

        &--break-words {
            word-break: break-all;
        }
    }

    &__icon {
        margin: 0 0.125rem;
    }

    &__no-results {
        font-size: 0.75rem;
        padding: 0.25rem 0.375rem;
    }

    &__cta-link {
        font-size: 0.6875rem;
        padding: 0.25rem 0.375rem;
    }
}
